<template>
	<view class="tab-bar">
		<view class="tab-item" v-for="(item,index) in data" :key="index" :class="{active: current == index}" @tap='goPage(item)'>
			<view>
				<image :src="item.iconPath" v-if="current != item.id" mode="" class="imgIcon" :class="{big:item.big}"></image>
				<image :src="item.selectedIconPath" v-if="current == item.id" mode="" :class="{big:item.big}" class="imgIcon"></image>
			</view>
			<view class="text" v-if="item.text"  :style="{color:( item.id == current ? item.color:'#8e8c8c')}">{{item.text}}</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	const props = withDefaults(defineProps<{ current?: number }>(), { current: 1 });
	
	const goPage = (item) => {
		console.log(props.current,item.id)
		if(String(props.current) != String(item.id))
		{
			uni.reLaunch({
				url:item.pagePath
			})
		}
	}
	
	const data = [
		{
			iconPath: '../../static/tabbar/home.png',
			selectedIconPath: '../../static/tabbar/homeS.png',
			pagePath: '/pages/index/index',
			text: '首页',
			color:'#498BF2',
			id:1,
			big:false
		},
		{
			iconPath: '../../static/tabbar/class.png',
			selectedIconPath: '../../static/tabbar/classS.png',
			pagePath: '/pages/class/index',
			text: '班级',
			id:2,
			color:'#FDB124'
		},
		// {
		// 	iconPath: '../../static/tabbar/middle.png',
		// 	selectedIconPath: '../../static/tabbar/middle.png',
		// 	// pagePath: '/pages/guass/index',
		// 	pagePath: '/pages/talk/index',
		// 	text: '',
		// 	big:true,
		// 	id:3,
		// 	color:'#FDB124'
		// },
		{
			iconPath: '../../static/tabbar/ranking.png',
			selectedIconPath: '../../static/tabbar/rankingS.png',
			pagePath: '/pages/ranking/index',
			text: '排行榜',
			id:4,
			color:'#EF6F7B'
		},
		{
			iconPath: '../../static/tabbar/my.png',
			selectedIconPath: '../../static/tabbar/myS.png',
			pagePath: '/pages/my/index',
			id:5,
			text: '我的',
			color:'#FFB400'
		}
	]
</script>
<style lang="scss">
	.tab-bar {
		position: fixed;
		width: 100vw;
		height: 100rpx;
		padding-top: 10rpx;
		bottom: -2rpx;
		background-color: #fff;
		z-index: 99999;
		display: flex;
		padding-bottom: 78rpx;
		.tab-item {
			flex:1;
			text-align: center;
		}
		.imgIcon {
			width: 60rpx;
			height: 60rpx;
			&.big {
				width: 96rpx;
				height: 90rpx;
			}
		}
		.text {
			color:#8e8c8c;
			font-size: 20rpx;
		}
	}
</style>